// 全局变量 实例对象
var that;
class Tab {
  constructor(id) {
    // 获取元素
    // 这里的that 等于 this 表示that等于当前的实例化对象
    that = this;
    this.sum = document.querySelector(id);
    this.add = this.sum.querySelector(".tabadd");
    this.ul = this.sum.querySelector(".fisrstnav ul");
    this.section = this.sum.querySelector(".tabscon");
    this.init();
  }
  init() {
    this.updatNode();
    this.add.onclick = this.addtab;
    // 初始化操作 让相关元素绑定点击事件
    for (var i = 0; i < this.and.length; i++) {
      // 让当前的小li的索引号  等于当前的i
      this.and[i].index = i;
      // 给当前的每一个小li添加一个点击事件
      this.and[i].onclick = this.toggletab;
      // 给当前每一个关闭按钮注册一个点击事件
      this.remove[i].onclick = this.removetab;
      this.input[i].ondblclick = this.edittab;
      this.sky[i].ondblclick = this.edittab;
    }
  }
  // 获取所有的li 和 section
  updatNode() {
    this.and = this.sum.querySelectorAll("li");
    this.sky = this.sum.querySelectorAll("section");
    this.remove = this.sum.querySelectorAll(".icon-guanbi");
    this.input = this.sum.querySelectorAll(".fisrstnav li span:first-child");
  }
  // 切换功能
  toggletab() {
    that.clear();
    // 这里的this指的是 and【i】 给他加上类
    this.className = "liactive";
    // 给内容部分加上类  这里that表示Tab实例化对象
    that.sky[this.index].className = "conactive";
  }
  clear() {
    // 遍历所有的li
    for (var i = 0; i < this.and.length; i++) {
      // 去掉类名
      this.and[i].className = "";
      this.sky[i].className = "";
    }
  }
  // 添加功能
  addtab() {
    // 调用函数 去掉其余兄弟的类名
    that.clear();
    // 声明遍历  产生随机数
    var random = Math.random();
    // 生成字符模板
    var li =
      '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
    var section = '<section class="conactive">测试' + random + "</section>";
    // 添加字符模板
    that.ul.insertAdjacentHTML("beforeend", li);
    that.section.insertAdjacentHTML("beforeend", section);
    // 调用函数 初始化操作
    that.init();
  }
  // 删除功能
  removetab(e) {
    // 阻止冒泡 防止触发li的点击事件
    e.stopPropagation();
    // 找到 当前小li 的索引号
    var i = this.parentNode.index;
    // 删除当前的 小li 和 section
    that.and[i].remove();
    that.sky[i].remove();
    // 调用函数  初始化操作
    that.init();
    // 判断如果当前的小li  有liactive这个类 让它直接退出执行操作
    if (document.querySelector(".liactive")) return;
    // 每次点击 减减
    i--;
    // 每次减减完 给当前的小li  添加点击事件
    that.and[i] && that.and[i].click();
  }
  // 修改功能
  edittab() {
    // 获取文本框
    var sta = this.innerHTML;
    // 双击禁止选中文字
    window.getSelection
      ? window.getSelection().removeAllRanges()
      : document.selection.empty();
    this.innerHTML = '<input type="text" />';
    var input = this.children[0];
    input.value = sta;
    input.select();
    input.onblur = function () {
      this.parentNode.innerHTML = this.value;
    };
    input.onkeyup = function (e) {
      if (e.keyCode === 13) return this.blur();
    };
  }
}
new Tab("#tab");
